<template>
  <div>
    <input id="swipe"
           type="range"
           style="width: 100%">
    <div id="map"></div>
  </div>
</template>

<script>
import Map from "ol/Map.js";
import View from "ol/View.js";
import { defaults as defaultControls } from "ol/control.js";
import TileLayer from "ol/layer/Tile.js";
import OSM from "ol/source/OSM.js";
import XYZ from "ol/source/XYZ.js";
export default {
  mounted () {
    var osm = new TileLayer({
      source: new OSM({
        url: "http://tile-{a-c}.openstreetmap.fr/hot/{z}/{x}/{y}.png" //osm地形
      }),
    });

    var bing = new TileLayer({
      source: new XYZ({
        url: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=76d35ea95dafb0023ee631a25e260ec4" //天地图影像
      }),
      projection: "EPSG:4326"
    });

    var map = new Map({
      layers: [osm, bing],
      target: "map",
      controls: defaultControls({
        attributionOptions: {
          collapsible: false
        }
      }),
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

    var swipe = document.getElementById("swipe");

    bing.on("precompose", function(event) {
      var ctx = event.context;
      var width = ctx.canvas.width * (swipe.value / 100);

      ctx.save();
      ctx.beginPath();
      ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
      ctx.clip();
    });

    bing.on("postcompose", function(event) {
      var ctx = event.context;
      ctx.restore();
    });

    swipe.addEventListener(
      "input",
      function() {
        map.render();
      },
      false
    );
  }
};
</script>

<style scoped>
</style>
